<template>
  <div>
    <Hearder title="订单管理" listName="订单列表"></Hearder>
      <!-- 搜索 -->
   <el-form :inline="true" class="demo-form-inline">
     <el-form-item label="订单编号">
       <el-input v-model="search.name" placeholder="订单编号"></el-input>
     </el-form-item>
     <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
    title="订单发货"
    :visible.sync="dialogVisible"
    width="35%"
    > 
    <el-form :inline="false" class="demo-form-inline" label-width="90px">
     <el-form-item label="订单编号">
       <el-input v-model="pojo.name" placeholder="订单编号">{{pojo.name}}</el-input>
     </el-form-item>
     <el-form-item label="收货人">
       <el-input v-model="pojo.letter" placeholder="收货人">{{pojo.letter}}</el-input>
     </el-form-item>
     <el-form-item label="手机号码">
       <el-input v-model="pojo.seq" placeholder="手机号码">{{pojo.seq}}</el-input>
     </el-form-item>
     <el-form-item label="收货地址">
       <el-input v-model="pojo.seq" placeholder="收货地址">{{pojo.seq}}</el-input>
     </el-form-item>
     <el-form-item label="配送方式" label-position="left">
        <el-select v-model="pojo.region" placeholder="选择物流公司">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流单号">
       <el-input v-model="pojo.seq" placeholder="物流单号">{{pojo.seq}}</el-input>
     </el-form-item>
     <el-form-item>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="订单编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="提交时间"
      prop="name">
    </el-table-column>
    <el-table-column
      label="用户账号"
      prop="title">
    </el-table-column>
    <el-table-column
      label="订单金额"
     >
      <template slot-scope="scope">
        <img :src="scope.row.avatar" alt="" style="height: 3rem">
      </template>
    </el-table-column>
    <el-table-column
      label="支付方式"
      prop="title">
    </el-table-column>
    <el-table-column
      label="订单来源"
      prop="title">
    </el-table-column>
    <el-table-column
      label="订单状态"
      prop="title">
    </el-table-column>
    <el-table-column
      align="right" label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="fecthById(scope.row)">确认发货</el-button>
          <el-button
          size="mini"
          @click="fecthById(scope.row)">订单跟踪</el-button>
          <el-button
          size="mini"
          @click="fecthById(scope.row)">关闭/删除订单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
      <el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="fetchData"
      @size-change="fetchData"
      :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

  export default {
   data(){
   	return {
       tableData: [],
       search: {
        name: '',

      },
      pageSize: 5,  
      currentPage: 1,
      total: 30,
      pojo: {},
      dialogVisible: false,

    }
  },

   created(){
      this.fetchData()
   },
   methods: {
   	  async fetchData(){
        const  res =  await this.$http.post(`/api/brand/findPage.do?page=${this.currentPage}&size=${this.pageSize}`,this.search)
       this.tableData = res.data.rows;
       this.total =  res.data.total;
      },
      // 新建 与编辑
      async save() {
        // 通过判断id是否为空来发起不同的请求
        const res = await this.$http.post(`/api/brand/${this.pojo.id == null ? 'add' : 'update'}.do`,this.pojo);
        this.dialogVisible = false;
          // 刷新列表
          this.getBranList();
          this.$message({
            type: 'success',
            message: this.id?'修改成功':'保存成功'
          });
          

        },
      async fecthById(row){
         alert(row.id)
         this.dialogVisible = true
         const res = await this.$http.get(`/api/brand/findById.do?id=${row.id}`)
          // const res = await this.$http.get(`http://localhost:3000/brand?id=${row.id}`)

          this.pojo =  res.data;
          console.log(res)
          
          
        },
      async Delete(row) {
         this.$confirm('是否确定要删除'+row.name+'分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {

          const res = await this.$http.post()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //删除成功 查询获取数据
          this.fetchData()
        })
      }
      
   }
}
</script>